<template>
  <div class="app">
    <!-- <h1>当前计数为：{{ counter }}---双倍快乐：{{ doubleCounter }}</h1> -->
    <h1>当前计数为：{{ counter }}---双倍快乐：{{ doubleCounter }}</h1>
    <button @click="increment">+</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue'

// optoins
export default {
  // data() {
  //   return {
  //     counter: 100
  //   }
  // },
  // methods: {
  //   increment() {
  //     this.counter++
  //   }
  // },
  // computed: {
  //   doubleCounter() {
  //     return this.counter * 2
  //   }
  // }
  // composition api
  setup() {
    const counter = ref(100)
    const increment = () => {
      counter.value++
    }
    const doubleCounter = computed(() => {
      return counter.value * 2
    })

    return {
      counter,
      increment,
      doubleCounter
    }
  }
}
</script>
<style lang="scss" scoped></style>
